/*
  1. 打开页面
    请求到所有的分类数据
    把级联菜单渲染好
  2. 打开页面
    按默认显示的商品
    获取到它的分类参数信息
    渲染到表格
  3. 级联菜单切换内容
    级联菜单切换什么内容
    就跟随变换什么内容
    思路:
      当级联菜单选中的项改变的时候
      重新执行 getParamsInfo 方法
    双向数据绑定了 cateChecked 数组
      只要级联选择器内容改变
      cateChecked 数组就会改变
      只要 cateChecked 变了
        就重新请求
        watch 监控 cateChecked
*/
/*
  接口文档补充
    + 请求地址: categories/:id/attributes/:attrId
    + 请求方式: PUT
    + 携带参数:
      => id: 分类 id, 添加在 url 地址上
      => attrId: 属性 id, 添加在 url 地址上
      => attr_name: 属性名称, 请求体
      => attr_sel: 'only' 或者 'many', 请求体
      => attr_vals: 你修改的参数字符串
*/
export default {
  name: 'Params',
  data () {
    return {
      inputValue: [],
      // 输入框是否显示
      inputVisible: false,
      // 默认选中的分类 id
      cateChecked: [1, 3, 6],
      // 选项卡默认首页
      activeName: 'first',
      // 分类列表, 渲染级联菜单
      cateList: [],
      // 动态参数数组
      manyParamsList: [],
      // 添加标签内的文本内容
      addParamsInfo: ''
    }
  },
  created () {
    // 请求级联菜单需要的数据
    this.getCateList()
    // 请求默认分类参数
    this.getParamsInfo()
  },
  methods: {
    // 请求所有商品分类列表
    async getCateList () {
      const { data } = await this.$get('categories', { params: { type: 3 } })
      // 赋值
      this.cateList = data
    },
    // 获取动态参数
    async getParamsInfo () {
      // 根据当前选择的商品, 获取相关参数
      const { data } = await this.$get(`categories/${this.cateChecked[2]}/attributes`, { params: { sel: 'many' } })
      this.manyParamsList = data
    },
    // 删除 tag
    async deleteInfoHandler (vals, item, name, attrId) {
      const res = vals.filter(t => t !== item).join()
      /* eslint-disable quote-props */
      const { meta } = await this.$put(`categories/${this.cateChecked[2]}/attributes/${attrId}`, { 'attr_name': name, 'attr_sel': 'many', 'attr_vals': res })
      if (meta.status) {
        this.$message({
          type: 'success',
          message: `删除 ${name} 动态参数成功`
        })
        // 重新请求列表数据渲染
        // this.getParamsInfo()
        // 因为后端数据已经修改, 执行 getParamsInfo 是为了同步更新前端视图
        // 我们自己操作直接修改前端视图
        // 只要把这一条信息里面的 attr_vals 修改了即可
        const info = this.manyParamsList.find(item => item.attr_id === attrId)
        info.attr_vals = res
      }
    },
    // 添加 tag input 显示
    showAddTagHandler () {
      this.inputVisible = true
    },
    // 添加 tag
    async addParamsInfoHandler (val) {
      const addStr = this.addParamsInfo.trim()
      // 判断填写内容如果是一个空字符串, 那么什么都不做, 直接还原
      if (addStr === '') {
        this.inputVisible = false
        // 还原之后, 文本框清空
        this.addParamsInfo = ''
        return
      }
      // 判断填写内容原数据是否存在
      // 最好不要重复出现
      if (val.attr_vals.indexOf(addStr) !== -1) {
        this.inputVisible = false
        this.addParamsInfo = ''
        this.$message({
          type: 'warning',
          message: '该条信息已存在, 请重试'
        })
        return
      }
      // 增加 tag
      val.attr_vals.push(addStr)
      // 发送请求, 进行修改
      const { meta } = await this.$put(`categories/${this.cateChecked[2]}/attributes/${val.attr_id}`, {
        'attr_name': val.attr_name,
        'attr_sel': 'many',
        'attr_vals': val.attr_vals.join()
      })
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '添加标签成功'
        })
        // 让添加文本框还原
        this.inputVisible = false
        // 还原之后, 文本框清空
        this.addParamsInfo = ''
      }
    }
  },
  watch: {
    cateChecked: {
      handler () {
        // 只要代码执行了, 表示级联菜单重新选择了
        this.getParamsInfo()
      },
      deep: true
    }
  },
  computed: {
    randerParamsInfoList: {
      get () {
        const res = this.manyParamsList.map(item => {
          const info = { ...item }
          info.attr_vals = item.attr_vals.split(',')
          return info
        })
        return res
      }
    }
  }
}
